<script setup lang="ts">
  import { defineProps, ref, watch, reactive, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification, TableRowSelection } from '@arco-design/web-vue';
  import {
    AOSortingTaskPage,
    startSortingTask,
    pauseSortingTask,
    getWorkBinAndTool,
  } from '@/api/sorting-matching';

  const columns: any[] = [
    {
      title: '托盘',
      dataIndex: 'toolCode',
      width: 180,
    },
    {
      title: '缓存箱',
      dataIndex: 'workbinCode',
      width: 180,
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      width: 180,
    },
    {
      title: '站位',
      dataIndex: 'station',
      width: 80,
    },

    {
      title: '工作包号',
      dataIndex: 'packageCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: 180,
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: 180,
    },

    {
      title: '型号',
      dataIndex: 'mProductNumber',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: 180,
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: 180,
    },

    {
      title: '分拣状态',
      dataIndex: 'isSortName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      width: 180,
    },
  ];

  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const selectedKeys = ref<any>([]);
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);

  // 搜索条件
  const aoCode = ref<string>('');
  const planeNo = ref<string>('');
  const station = ref<string>('');
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(10);

  // 表格数据
  async function handleSearch() {
    const data = await AOSortingTaskPage({
      aoCode: aoCode.value,
      planeNo: planeNo.value,
      station: station.value,
      size: pageSize.value,
      current: pageNum.value,
    });

    localTableData.value = data.responseBody?.records || [];
    total.value = data.responseBody?.total || 0;
  }

  // 扫码操作
  const scanCode = ref<string>('');
  const scanInput = ref<any>('');
  // 适当的时间禁用扫码框
  const disabled = ref<boolean>(false);

  const booleanStore = useBooleanStore();
  const showDrawer = ref<boolean>(false);

  const btnIsFalse = ref<boolean>(false);

  // 当前托盘
  const currentTool = ref<any[]>([]);
  // 当前箱
  const currentWorkBin = ref<any[]>([]);
  // 托盘队列
  const toolQueue = ref<any[]>([]);
  // 箱队列
  const workBinQueue = ref<any[]>([]);
  // 等待托盘
  const waitTool = ref<any[]>([]);
  // 等待箱
  const waitWorkBin = ref<any[]>([]);

  // 获取队列
  async function getQueue() {
    const data = await getWorkBinAndTool({});
    if (data.retCode === '200') {
      currentTool.value = data.responseBody.currentTool;
      currentWorkBin.value = data.responseBody.currentWorkBin;
      toolQueue.value = data.responseBody.toolQueue;
      workBinQueue.value = data.responseBody.workBinQueue;
      waitTool.value = data.responseBody.waitTool;
      waitWorkBin.value = data.responseBody.waitWorkBin;
    } else {
      Notification.error({
        title: '失败',
        content: '队列获取失败',
        closable: true,
      });
    }
  }

  // 开始作业
  async function startSorting() {
    const data = await startSortingTask(localTableData.value);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      btnIsFalse.value = !btnIsFalse.value;
      getQueue();
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  }

  // 暂停作业
  async function pauseSorting() {
    const data = await pauseSortingTask(localTableData.value);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      btnIsFalse.value = !btnIsFalse.value;
      getQueue();
    } else {
      Notification.error({
        content: data.message,
        title: '失败',
        closable: true,
      });
    }
  }

  // 监听弹框
  watch(
    () => booleanStore.boolValue2,
    (newValue: boolean) => {
      if (booleanStore.num2 === 19) {
        showDrawer.value = newValue;
      }
    }
  );
  const handleChange = (_data: any) => {
    localTableData.value = _data;
  };
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <a-modal
    v-model:visible="showDrawer"
    :footer="false"
    fullscreen
    @cancel="booleanStore.toggleBool2(19)"
  >
    <template #title> 分拣操作页面 </template>
    <div>
      <a-row :gutter="8">
        <a-col :span="2">
          <div v-if="!btnIsFalse" class="task-font">
            <icon-play-circle
              size="64"
              style="color: red"
              @click="startSorting"
            />
            <div style="color: green">开始作业</div>
          </div>
          <div v-else class="task-font">
            <icon-pause-circle
              size="64"
              style="color: green"
              @click="pauseSorting"
            />
            <div style="color: red"> 暂停作业</div>
          </div>
        </a-col>
        <a-col :span="6">
          <a-input
            v-model="planeNo"
            placeholder="架次"
            size="large"
            allow-clear
            @click.enter="handleSearch"
          />
          <a-input
            v-model="station"
            placeholder="站位"
            size="large"
            class="margin-top"
            allow-clear
            @click.enter="handleSearch"
          />
          <a-input
            v-model="aoCode"
            placeholder="AO"
            size="large"
            class="margin-top"
            allow-clear
            @click.enter="handleSearch"
          />
        </a-col>
        <a-col :span="16">
          <a-table
            :draggable="{}"
            :stripe="true"
            class="top-table"
            :pagination="false"
            :columns="columns"
            :data="localTableData"
            :scroll="{ y: 400 }"
            style="height: 250px"
            @change="handleChange"
          >
          </a-table>
          <div class="page-position">
            <a-pagination
              :total="total"
              :current="pageNum"
              :page-size="pageSize"
              show-total
              show-jumper
              show-page-size
              @change="change"
              @update:page-size="changeSize"
            /> </div
        ></a-col>
        <a-divider :size="2" />
        <!-- 缓存箱队列 -->
        <a-col :span="24" class="col-contain">
          <a-card :style="{ width: '360px' }" :bordered="false">
            <template #title>
              <div class="title-font">料箱队列</div>
            </template>
            <!-- 当前箱 -->
            <a-list :max-height="240" :scrollbar="true">
              <a-list-item v-for="(item, index) in currentWorkBin" :key="index">
                <div
                  >当前箱：<span
                    :class="{ 'current-font': currentWorkBin.length > 0 }"
                    >{{ item.palletCode }}</span
                  ></div
                >
              </a-list-item>
              <!-- 等待箱箱 -->
              <a-list-item v-for="(item, index) in waitWorkBin" :key="index">
                <div>
                  已出等待作业箱：<span
                    :class="{ 'wait-font': waitWorkBin.length > 0 }"
                    >{{ item.palletCode }}</span
                  ></div
                ></a-list-item
              >

              <!-- 箱队列 -->
              <a-list-item v-for="(item, index) in workBinQueue" :key="index">
                <div>
                  料箱队列：<span
                    :class="{ 'queue-font': workBinQueue.length > 0 }"
                    >{{ item.workbinCode }}</span
                  ></div
                ></a-list-item
              >
            </a-list>
          </a-card>

          <div style="display: flex; align-items: center"
            >当前料箱队列数量：<span class="queue-num">{{
              workBinQueue.length
            }}</span></div
          >
          <div style="display: flex; align-items: center"
            >当前托盘队列数量：<span class="queue-num">{{
              toolQueue.length
            }}</span></div
          >

          <!-- 托盘队列 -->
          <a-card :style="{ width: '360px' }" :bordered="false">
            <template #title>
              <div class="title-font">托盘队列</div>
            </template>
            <!-- 当前托盘 -->
            <a-list :max-height="240" :scrollbar="true">
              <a-list-item v-for="(item, index) in currentTool" :key="index">
                <div>
                  当前托盘：<span
                    :class="{ 'current-font': currentTool.length > 0 }"
                    >{{ item.palletCode }}</span
                  ></div
                ></a-list-item
              >
              <!-- 等待托盘 -->
              <a-list-item v-for="(item, index) in waitTool" :key="index">
                <div>
                  已出等待作业盘：
                  <span :class="{ 'wait-font': waitTool.length > 0 }">{{
                    item.palletCode
                  }}</span>
                </div>
              </a-list-item>
              <!--托盘队列 -->
              <a-list-item v-for="(item, index) in toolQueue" :key="index">
                <div>
                  托盘队列：<span
                    :class="{ 'queue-font': toolQueue.length > 0 }"
                    >{{ item.toolCode }}</span
                  >
                </div>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
      <a-divider :size="2" />
      <!-- 扫码操作 -->
      <a-row :gutter="8" style="margin-top: 10px">
        <a-col :span="6">
          <div>
            <a-input
              ref="scanInput"
              v-model="scanCode"
              :disabled="disabled"
              placeholder="请输入缓存箱/托盘码/条码"
              size="large"
            />
          </div>
        </a-col>
        <a-col :span="6">分拣数量：</a-col>
        <a-col :span="12">
          <div class="div-container">
            <img height="50" src="@/assets/images/确认.png" />
            <a-button type="primary" style="margin-left: 10px" size="large"
              >确认提交</a-button
            >
            <a-button type="primary" style="margin-left: 10px" size="large"
              >查看缓存箱</a-button
            >
            <a-button type="primary" style="margin-left: 10px" size="large"
              >查看托盘</a-button
            >
            <a-button type="primary" style="margin-left: 10px" size="large"
              >缓存箱回库</a-button
            >
            <a-button type="primary" style="margin-left: 10px" size="large"
              >托盘回库</a-button
            >
          </div>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<style scoped>
  .current-font {
    color: #4ad953;
    font-weight: bold;
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .wait-font {
    color: #ffd45e;
    font-weight: bold;
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .queue-font {
    color: #bddbff;
    font-weight: bold;
    font-size: 18px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .queue-num {
    font-weight: 600;
    font-size: 24px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .col-contain {
    display: flex;
    justify-content: space-around;
  }
  .title-font {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }
  .task-font {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }
  .margin-top {
    margin-top: 10px;
  }
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .div-container {
    display: flex;
    justify-content: start;
    align-items: center;
  }
</style>
